<!--vue模板-->
<template>
  <el-row>
    <!-- 头部搜索 -->
    <el-form ref="form" :inline="true" :model="searchForm" class="form-inline">
      <el-form-item label="产品名称" prop="name">
        <el-input v-model="searchForm.name" placeholder="产品名称" />
      </el-form-item>

      <el-form-item label="产品编码" prop="code">
        <el-input v-model="searchForm.code" placeholder="产品编码" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button @click="resetForm(form)">清空</el-button>
        <el-divider direction="vertical" border-style="solid" />
        <el-button type="primary" plain @click="visible = true">新增</el-button>
      </el-form-item>
    </el-form>
  </el-row>
  <el-row style="background-color: transparent; height: 80vh">
    <el-col :span="4">
      <CategoryTree ref="categoryRef"></CategoryTree>
    </el-col>
    <el-col :span="20" style="height: 100%">
      <el-table :data="tableData" border style="width: 100vw">
        <el-table-column prop="code" label="产品编码" />
        <el-table-column prop="name" label="产品名称" />
        <el-table-column prop="categoryName" label="所属类别" />
        <el-table-column prop="spec" label="规格型号" />
        <el-table-column prop="unit" label="单位" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              type="primary"
              :icon="Edit"
              circle
              @click="updateCategory(scope.row)"
            />
            <el-button
              type="danger"
              :icon="Delete"
              circle
              @click="deleteById(scope.row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <SaveOrUpdate ref="saveUpdate" @close="refresh"></SaveOrUpdate>
</template>

<!--vue 组件选项定义-->
<script setup>
import { onBeforeMount, provide, ref } from "vue";
import CategoryTree from "../category/CategoryTree.vue";
import SaveOrUpdate from "./SaveOrUpdate.vue";
import { getProductAll, deleteProductById } from "@/api/basic/Product.js";

import { Delete, Edit } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const form = ref(null);

// 分页显示
const pageNum = ref(1);
const pageSize = ref(10);

const saveUpdate = ref(null);
// 编辑数据
const updateCategory = (row) => {
  visible.value = true;
  saveUpdate.value.init(row);
};

// 刷新整个界面的数据
const refresh = () => {
  categoryRef.value.showData();
  getProduct();
};

const searchForm = ref({
  categoryCode: "",
  code: "",
  name: "",
});

// 新增 添加
const visible = ref(false);

provide("isShow", visible);

const pidAdd = ref("");

provide("pidAdd", pidAdd);

// 清空form表单
const resetForm = (formEl) => {
  formEl.resetFields();
  searchForm.value = {
    categoryCode: "",
    code: "",
    name: "",
  };

  getProduct();
};

// --------------
//  查出的字典数据
const tableData = ref([]);
const categoryRef = ref(null);

//-----------------
const showCurData = async (id, data) => {
  searchForm.value.categoryCode = data.code;
  const res = await getProductAll(
    pageNum.value,
    pageSize.value,
    searchForm.value
  );
  tableData.value = res.data;
};

provide("showCurData", showCurData);

async function getProduct() {
  const res = await getProductAll(
    pageNum.value,
    pageSize.value,
    searchForm.value
  );

  tableData.value = res.data;
}

onBeforeMount(() => {
  getProduct();
});

// 搜索提交
const onSubmit = () => {
  // console.log(formInline,"1234");
  getProduct();
  console.log("submit!");
};

const deleteById = (id) => {
  console.log("id");

  ElMessageBox.confirm("您将要删除当前用户，是否删除?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteProductById(id).then((resp) => {
        ElMessage.success("删除成功！");
        getProduct();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除！",
      });
    });
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
:deep(.el-tree-node__content:hover) {
  background-color: aquamarine;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
